<script setup lang="ts"></script>

<template>
  <div class="nav">
    <router-link to="/props">Props</router-link>
    <router-link to="/event">自定义事件</router-link>
    <router-link to="/event-bus">事件总线</router-link>
    <router-link to="/v-model">v-model</router-link>
    <router-link to="/attrs">useAttrs</router-link>
    <router-link to="/ref-parent">ref与$parent</router-link>
    <router-link to="/provide-inject">Provide和Inject</router-link>
    <router-link to="/pinia">Pinia</router-link>
    <router-link to="/slot">Slot</router-link>
  </div>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped lange="scss">
.nav {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.3rem;

  & a {
    color: black;

    &:hover {
      color: brown;
    }
  }
}
</style>
